<template>
    <button
      :class="classes"
      :disabled="disabled || loading"
      @click="onClick"
    >
      <span v-if="loading" class="vit-button-loading-icon" />
      <slot></slot>
    </button>
  </template>
  
  <script lang="ts" setup name="VitButton">
  import { computed } from 'vue'
  const props = withDefaults(defineProps<{
    type?: 'primary' | 'default' | 'dashed' | 'link' | 'text';
    size?: 'small' | 'middle' | 'large';
    disabled?: boolean;
    loading?: boolean;
  }>(), {
    type: 'default',
    size: 'middle',
    disabled: false,
    loading: false
  });
  const emit = defineEmits<{
    (e: 'click', id: number): void;
  }>();

  const onClick = () => {
    emit("click", 1);
  }

  const classes = computed(() => ({
    'vit-button': true,
    [`vit-button-${props.type}`]: props.type,
    [`vit-button-${props.size}`]: props.size,
    'vit-button-disabled': props.disabled,
    'vit-button-loading': props.loading
  }));

  </script>
  
  <style scoped>
  .vit-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 15px;
    font-size: 14px;
    border-radius: 2px;
    border: 1px solid #d9d9d9;
    background: #fff;
    cursor: pointer;
    transition: all 0.3s;
    user-select: none;
  }
  
  .vit-button:hover {
    color: #40a9ff;
    border-color: #40a9ff;
    background: #fff;
  }
  
  .vit-button-primary {
    color: #fff;
    border-color: #1890ff;
    background: #1890ff;
  }
  
  .vit-button-primary:hover {
    color: #fff;
    border-color: #40a9ff;
    background: #40a9ff;
  }
  
  .vit-button-dashed {
    border-style: dashed;
  }
  
  .vit-button-link {
    color: #1890ff;
    border: none;
    background: transparent;
  }
  
  .vit-button-link:hover {
    color: #40a9ff;
    background: transparent;
  }
  
  .vit-button-text {
    color: rgba(0, 0, 0, 0.85);
    border: none;
    background: transparent;
  }
  
  .vit-button-text:hover {
    color: #40a9ff;
    background: rgba(0, 0, 0, 0.04);
  }
  
  .vit-button-small {
    padding: 0 7px;
    font-size: 12px;
  }
  
  .vit-button-large {
    padding: 6px 20px;
    font-size: 16px;
  }
  
  .vit-button-disabled {
    color: rgba(0, 0, 0, 0.25);
    border-color: #d9d9d9;
    background: #f5f5f5;
    cursor: not-allowed;
  }
  
  .vit-button-disabled:hover {
    color: rgba(0, 0, 0, 0.25);
    border-color: #d9d9d9;
    background: #f5f5f5;
  }
  
  .vit-button-loading {
    position: relative;
    pointer-events: none;
  }
  
  .vit-button-loading-icon {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 8px;
    border: 2px solid #fff;
    border-top-color: transparent;
    border-radius: 50%;
    animation: button-loading-spinner 0.75s linear infinite;
  }
  
  @keyframes button-loading-spinner {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
  </style> 